<!--
 * @Author: yumao 123456
 * @Date: 2025-09-13 15:30:03
 * @LastEditors: yumao 123456
 * @LastEditTime: 2025-09-16 15:57:30
 * @FilePath: \龙飞1\src\views\model\creditSetting\variableConfig.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="variable-config-list">
    <!-- 面包屑导航 -->
    <div class="custom-breadcrumb">
      <span class="breadcrumb-item" @click="goToCreditSetting">征信变量配置</span>
      <span class="breadcrumb-separator">></span>
      <span class="breadcrumb-item current">变量配置</span>
    </div>
    <a-card :title="`变量配置 - ${queryParam.busiCode}`">
      <div class="search-form">
        <div class="form-content">
          <a-form layout="inline">
            <a-form-item label="中文名称">
              <a-input v-model="queryParam.paramName" placeholder="请输入中文名称" allowClear :style="{
                width: '200px',
              }" />
            </a-form-item>
            <a-form-item label="英文名称">
              <a-textarea v-model="queryParam.paramCode" placeholder="最大支持500个变量快速检索，变量中间用英文逗号[,]进行分割" :rows="2"
                :style="{ width: '300px' }" allowClear />
            </a-form-item>
            <a-form-item label="业务编码">
              <a-input v-model="queryParam.busiCode" placeholder="请输入业务编码" allowClear :style="{
                width: '200px',
              }" disabled />
            </a-form-item>
          </a-form>
        </div>
        <div class="form-actions">
          <div class="all-actions">
            <div class="search-actions">
              <a-button type="primary" @click="searchHandle">
                <a-icon type="search" />查询
              </a-button>
              <a-button @click="resetHandle">
                <a-icon type="reload" />重置
              </a-button>
            </div>
            <div class="operation-actions">
              <a-button type="primary" @click="handleAdd">
                <a-icon type="plus" />新增
              </a-button>
              <a-button type="danger" @click="handleBatchDelete" :disabled="selectedRowKeys.length === 0">
                <a-icon type="delete" />删除
              </a-button>
            </div>
          </div>
        </div>
      </div>
      <s-table ref="table" size="default" rowKey="guid" :columns="columns" :data="loadData" :alert="false"
        showPagination="auto" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :scroll="{ x: 1500 }">
        <template slot="serialNumber" slot-scope="text, record, index">
          {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
        </template>
        <template slot="createTime" slot-scope="text, record">
          {{ formatTime(record.createTime) }}
        </template>
        <!-- <template slot="operation" slot-scope="text, record">
          <a-button type="link" @click="handleDelete(record)" style="color: #ff4d4f;">删除</a-button>
        </template> -->
      </s-table>
    </a-card>
  </div>
</template>

<script>
import { STable } from '@/components'
import moment from 'moment'
import { getParamList, paramDelBatch } from '@/api/creditSetting'

const columns = [
  {
    title: '序号',
    width: 80,
    scopedSlots: { customRender: 'serialNumber' },
  },
  {
    title: '英文名称',
    dataIndex: 'paramCode',
    width: 200,
  },
  {
    title: '中文名称',
    dataIndex: 'paramName',
    width: 200,
  },
  {
    title: '变量来源',
    dataIndex: 'paramType',
    width: 120,
    customRender: (text) => {
      return text === 1 ? '配置类' : text === 2 ? '非配置类' : ''
    }
  },

  {
    title: '分类',
    dataIndex: 'category',
    width: 150,
  },
  {
    title: '产品',
    dataIndex: 'product',
    width: 120,
  },
  {
    title: '创建人',
    dataIndex: 'createUser',
    width: 120,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 180,
    scopedSlots: { customRender: 'createTime' },
  },
  {
    title: '唯一标识',
    dataIndex: 'guid',
    width: 200,
  },
  // {
  //   title: '操作',
  //   scopedSlots: { customRender: 'operation' },
  //   width: 120,
  //   fixed: 'right',
  // },
]

export default {
  name: 'VariableConfig',
  components: {
    STable
  },
  props: {},
  data() {
    return {
      columns,
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        showSizeChanger: true,
        showQuickJumper: true,
      },
      queryParam: {
        paramName: '',
        paramCode: '',
        busiCode: '',
      },
      selectedRowKeys: [],
    }
  },
  created() {
    this.queryParam.busiCode = this.$route.query.setCode || ''
  },
  mounted() {
  },
  methods: {
    searchHandle() {
      this.$refs.table.refresh(true)
    },
    resetHandle() {
      this.queryParam = {
        paramName: '',
        paramCode: '',
        busiCode: this.$route.query.setCode || '',
      }
    },
    handleAdd() {
      this.$router.push({
        path: '/model/creditSetting/variableAdd',
        query: {
          busiCode: this.queryParam.busiCode
        }
      })
    },
    loadData(parameter) {
      const requestParameters = {
        current: parameter.pageNo || 1,
        pageSize: parameter.pageSize || 10,
        condition: {
          paramName: this.queryParam.paramName || '',
          paramCode: this.queryParam.paramCode || '',
          category: '',
          product: '',
          content: '',
          paramType: '',
          busiCode: this.queryParam.busiCode || '',
          state: null,
          deal: null
        },
        orderBy: ['id desc']
      }

      console.log('loadData request parameters:', requestParameters)
      return getParamList(requestParameters).then((res) => {
        if (res.code === 0 && res.data) {
          return {
            total: res.data.pagination.total,
            curPage: res.data.pagination.current,
            data: res.data.list || [],
            totalPage: res.data.pagination.pages,
            pageSize: res.data.pagination.pageSize,
          }
        }
        return {
          total: 0,
          curPage: 1,
          data: [],
          totalPage: 0,
          pageSize: 10,
        }
      })
    },
    formatTime(time) {
      if (!time) return ''
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    handleDelete(record) {
      this.$confirm({
        title: '确认删除',
        content: `确定要删除变量"${record.paramName}"吗？`,
        onOk: () => {
          this.deleteItems([record.guid])
        },
      })
    },
    handleBatchDelete() {
      if (this.selectedRowKeys.length === 0) {
        this.$message.warning('请选择要删除的数据')
        return
      }
      this.$confirm({
        title: '确认批量删除',
        content: `确定要删除选中的 ${this.selectedRowKeys.length} 条数据吗？`,
        onOk: () => {
          this.deleteItems(this.selectedRowKeys)
        },
      })
    },
    deleteItems(guids) {
      const params = {
        guid: guids.join(','),
        busiCode: this.queryParam.busiCode
      }
      paramDelBatch(params)
        .then((res) => {
          if (res.code === 0) {
            this.$message.success('删除成功')
            this.selectedRowKeys = []
            this.$refs.table.refresh()
          } else {
            this.$message.error(res.message || '删除失败')
          }
        })
        .catch((error) => {
          console.error('删除失败:', error)
          this.$message.error('删除失败，请稍后重试')
        })
    },
    goToCreditSetting() {
      this.$router.push('/model/creditSetting')
    },
  }
}
</script>

<style lang="less" scoped>
.variable-config-list {
  padding: 16px;

  .search-form {
    margin-bottom: 16px;
    padding: 16px;
    background: #fafafa;
    border-radius: 6px;

    .form-content {
      margin-bottom: 12px;

      .ant-form {
        margin: 0;

        .ant-form-item {
          margin-bottom: 12px;
          margin-right: 16px;
        }
      }
    }

    .form-actions {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .all-actions {
        display: flex;
        align-items: center;
        gap: 24px;
      }

      .search-actions {
        display: flex;
        gap: 8px;
      }

      .operation-actions {
        display: flex;
        gap: 8px;
      }
    }
  }

  :deep(.ant-table-thead > tr > th) {
    background: #fafafa;
    font-weight: 600;
  }

  :deep(.ant-table-tbody > tr:hover > td) {
    background: #f5f5f5;
  }

}

/* 自定义面包屑样式 */
.custom-breadcrumb {
  margin-bottom: 16px;
  font-size: 14px;
  color: #666;
}

.breadcrumb-item {
  color: #666;
  cursor: pointer;
  transition: color 0.3s;
}

.breadcrumb-item:hover {
  color: #1890ff;
}

.breadcrumb-item.current {
  color: #333;
  font-weight: 500;
  cursor: default;
}

.breadcrumb-item.current:hover {
  color: #333;
}

.breadcrumb-separator {
  margin: 0 8px;
  color: #ccc;
}

/* 禁用状态输入框样式优化 */
.ant-input[disabled] {
  background-color: #f5f5f5 !important;
  border-color: #d9d9d9 !important;
  color: #999 !important;
  cursor: not-allowed !important;
}

.ant-input[disabled]:hover {
  border-color: #d9d9d9 !important;
}
</style>
